<template>
	<el-table :data="tableData.sc" border style="width: 100%">
		<el-table-column fixed prop="saleId" label="销售机会编号" width="120" />
		<el-table-column prop="planDate" label="计划日期" width="120" />
		<el-table-column prop="planContent" label="计划内容" width="320" />
		<el-table-column prop="planExecutedate" label="执行日期" width="120" />
		<el-table-column prop="planExecute" label="执行结果" width="120" />
		<el-table-column prop="uName" label="执行人" width="120" />

	</el-table>
	<el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[7, 12, 21, 28]"
		layout="total, prev, pager, next" v-model:total="total" @size-change="handleSizeChange"
		@current-change="handleCurrentChange" />


</template>


<script setup>
	import {
		ElMessage
	} from 'element-plus'
	import {
		reactive,
		ref
	} from 'vue'
	import axios from 'axios'
	import qs from 'qs'

	const currentPage = ref(1)
	const pageSize = ref(7)
	const total = ref(10)



	const tableData = reactive({});
	const query = () => {
		axios.post("http://localhost:8080/devPlan/page", qs.stringify({
			page: currentPage.value,
			size: pageSize.value
		})).then(res => {
			tableData.sc = res.data.list;
			total.value = 10;
		})
	}
	query()




	//切换每页的行数
	const handleSizeChange = () => {
		query()
	}
	//切换页码的函数
	const handleCurrentChange = () => {
		query()
	}

</script>
